<template>
	<view class="container">
		<!-- <u-top-tips ref="uTips" :navbar-height="statusBarHeight + navbarHeight"></u-top-tips> -->
		<!-- 小程序顶部状态栏 -->
		<!-- #ifdef MP -->
		<view :style="{ height: mpbarheight + 'px' }"></view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"><view class="top_view"></view></view>
		<!-- #endif -->
		<!-- banner -->
		<view style="background-color: #FFFFFF;padding: 10rpx 28rpx;" class="usearch">
			<u-search
				placeholder="返利 输入商品或者粘贴标题"
				shape="square"
				v-model="search"
				input-align="center"
				action-text="搜索"
				:clearabled="true"
				@clear="doclear"
				@search="dosearch"
				@custom="dosearch"
			></u-search>
		</view>
		<view class="container_body">
			<u-swiper :list="bannerlist" @click="gobanner"></u-swiper>
			<!-- 公告 -->
			<view class="news"><u-notice-bar volume-size="48" mode="vertical" type="none" :duration="5000" :list="textlist"></u-notice-bar></view>
			<!-- 功能区 -->
			<view class="lt_card">
				<!-- 	<view class="card_body u-p-16 u-flex u-row-center u-flex-wrap">
				<view class="lt_class" v-for="(item, index) in classList" :key="index">
					<view class="lt_item u-text-center u-m-b-16">
						<view><u-icon :name="item.icon" size="80"></u-icon></view>
						<text class="lt_text">{{ item.title }}</text>
					</view>
				</view>
			</view> -->
				<view class="card_body">
					<u-grid :col="4" :border="false" @click="gridgo">
						<u-grid-item v-for="(item, index) in classList" :key="index" :index="index" style="border-radius: 16rpx;">
							<!-- 						<u-icon :name="" :size="46" custom-prefix="custom-icon"></u-icon>-->
							<view class="t-icon" :class="item.icon" style="width: 80rpx;height: 80rpx;"></view>
							<view class="grid-text" style="font-size: 28rpx;">{{ item.title }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			<!-- 个人信息 -->
			<view class="lt_card u-p-t-30">
				<view class="user_body">
					<view class="username u-text-left">{{ username }}</view>
					<view class="userinfo">
						<view class="userrmb u-text-center">RMB</view>
						<view class="usermoney">
							<u-count-to
								:start-val="0"
								:end-val="jobinfo.server_price"
								:font-size="96"
								:duration="2000"
								:use-easing="false"
								:decimals="2"
								separator=","
							></u-count-to>
						</view>
					</view>
					<view class="userrank u-flex u-row-center">实时排行第 {{ jobinfo.rank }} 名，距离上一名相差{{ jobinfo.diff_price }}</view>
				</view>
			</view>
			<!-- 图表 -->
			<view class="lt_card u-p-t-30 u-m-b-20">
				<view class="user_data u-p-32">
					<view class="mychart"><canvas canvas-id="canvasMix" id="canvasMix" class="charts" disable-scroll="true"></canvas></view>
					<view class="latelydate">
						<block v-for="(item, index) in latelyList" :key="index">
							<view class="u-flex u-row-between u-m-t-26 u-col-center">
								<text class="timer">{{ item.time }}</text>
								<view class="u-flex-1" style="height: 38rpx;">
									<u-line-progress :striped="true" class="linepro" :percent="item.percent" :height="36" active-color="#FFDB28" :striped-active="true">
										<template slot="default">
											<view class="info">{{ item.info }}</view>
										</template>
									</u-line-progress>
								</view>
							</view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<u-mask :show="isgoodsshow" @click="show = false">
			<view class="warp">
				<!-- <view class="rect" @tap.stop></view> -->
				<!-- <u-popup v-model="isgoodsshow" mode="center" border-radius="10" width="454" height="334" @touchmove.stop.prevent="moveHandle"> -->
				<view class="popbox" style="width: 454rpx;height: 334rpx;">
					<view class="top u-font-12 u-flex u-row-between">
						<view class="top_left">已为您找到</view>
						<view class="top_right" style="color: red;" @click="gogoodsinfo">
							商品详情
							<u-icon name="arrow-right" color="red" size="20"></u-icon>
						</view>
					</view>
					<view style="width: 100%;height: 2rpx;background-color: #dee2ea;"></view>
					<view class="info u-flex u-row-left">
						<u-image :src="goods.pict_url" :width="130" :height="130"></u-image>
						<view class="infotext" style="flex: 1;margin-left:16rpx;">
							<view class="u-line-2">{{ goods.title }}</view>
							<view class="" style="width: 100%;">
								<view class="butie">补贴{{ goods.butie }}</view>
							</view>
							<view class="dsj">
								到手价
								<text style="color: red;">￥ {{ goods.price }}</text>
							</view>
						</view>
					</view>
					<view class="goodsbtn" @click="tbkjump(goods.item_url)">下单立即省{{ goods.coupon_amount }}元</view>
					<u-icon name="close-circle" :size="80" color="white" style="font-weight: 600;" class="closebtn" @click="isgoodsshow = false"></u-icon>
				</view>
			</view>
			<!-- </u-popup> -->
		</u-mask>
		<u-toast ref="uToast"></u-toast>
		<!-- #ifdef APP-PLUS -->
		<view class="updage"><version-update ref="version" @tap="toUpdate" :showVersion="true" :autoShow="false"></version-update></view>
		<!-- #endif -->
	</view>
</template>

<script>
import uCharts from '@/components/u-charts/u-charts.js';
var _self;
var canvaMix = null;
export default {
	data() {
		return {
			goods: {},
			isgoodsshow: false,
			mpbarheight: this.statusBarHeight,
			// 导航栏内容区域高度，不包括状态栏高度在内
			navbarHeight: 44,
			search: '',
			jobinfo: {
				server_price: 0, //今日实时预估服务费
				pay: 0, //今日实时支付金额
				js_pay_service: 0, //今日实时结算服务费
				rank: 0, // 获取当前用户在今天预估服务费的排名的名次
				diff_price: 0 //与上一名差距
			},
			bannerlist: [
				// {
				// 	image: '',
				// 	redirect: 'www.baodu.com'
				// }
			],
			classList: [
				{
					icon: 'custom-t-icon-huodongmianbiao',
					title: '我的活动'
				},
				{
					icon: 'custom-t-icon-icon-test',
					title: '审核商品'
				},
				{
					icon: 'custom-t-icon-yongjin1',
					title: '佣金查询'
				},
				{
					icon: 'custom-t-icon-tubiaozhizuomoban-fuben',
					title: '做营销图'
				},
				{
					icon: 'custom-t-icon-xueyuanshezhi-',
					title: '乐推学院'
				},
				{
					icon: 'custom-t-icon-vip',
					title: 'VIP权益'
				},
				{
					icon: 'custom-t-icon-qiandai',
					title: '商品返利'
				},
				{
					icon: 'custom-t-icon-luru',
					title: '招商管理'
				}
			],
			username: '请先登录',
			user: '',
			textlist: ['乐推招商系统APP版本上线啦~', '乐推招商系统APP版本上线啦~'],
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			latelyList: [
				// {
				// 	time: '09-08',
				// 	percent: 20,
				// 	info: '2125.00'
				// },
				// {
				// 	time: '09-09',
				// 	percent: 40,
				// 	info: '4010.00'
				// },
				// {
				// 	time: '09-10',
				// 	percent: 60,
				// 	info: '5933.00'
				// }
			],
			flag: '',
			timelist: [],
			timelist2: [],
			preServicelist: [], //预估服务费
			preServicelist2: [], //预估服务费
			cmServicelist: [], //结算服务费
			reb_rate: 0,
			oldcut: ''
		};
	},

	onLoad(option) {
		_self = this;
		this.$u.api
			.getrebateprourl()
			.then(res => {
				// console.log(res)
				this.reb_rate = res.data.reb_rate;
			})
			.catch(err => {
				console.log(err);
			});

		this.cWidth = uni.upx2px(600);
		this.cHeight = uni.upx2px(160);
		if (uni.getStorageSync('userinfo').user) {
			this.username = uni.getStorageSync('userinfo').user;
		}
		if (option.username) {
			this.user = option.username;
		}
		this.flag = getApp().globalData.flag;
		if (!this.flag) {
			// console.log('2', this.flag);
			this.gettodayinfo();
			this.getestimateprice();
			getApp().globalData.flag = true;
		}
	},

	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		// console.log('refresh');
		this.gettodayinfo();
		this.getestimateprice();
		this.getbannerlist();
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	onReady() {
		if (this.user !== '') {
			this.$refs.uToast.show({
				title: '欢迎您!' + this.user,
				type: 'success'
			});
		}
		this.gettodayinfo();
		this.getestimateprice();
		this.getbannerlist();
	},
	onLaunch() {
		// #ifdef APP-PLUS
		this.toUpdate();
		// #endif
	},
	onShow() {
		var _thais = this;
		// #ifndef H5
		uni.getClipboardData({
			success: function(res) {
				console.log('剪切板内容', res.data);
				if (_thais.oldcut !== res.data) {
					_thais.searchgoods(res.data);
				}
				_thais.oldcut = res.data;
			},
			fail: function(err) {
				console.log('获取剪切板失败', err);
			}
		});
		// #endif
		// console.log(this.$mp.page.route)
		uni.setStorageSync('routeurl', 'index');
		if (uni.getStorageSync('isrank')) {
			uni.removeStorageSync('isrank');
		}
	},
	methods: {
		toUpdate(e) {
			this.$refs.version.toUpdate(); //调用组件的显示更新弹窗的方法。
		},
		gogoodsinfo() {
			uni.navigateTo({
				url: '/pages/goodsrebate/goodsinfo/goodsinfo?item=' + encodeURIComponent(JSON.stringify(this.goods)),
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		moveHandle() {
			return false;
		},
		tbkjump(url) {
			// 淘宝的商品链接，换成需要访问的地址
			// let url = 'https://detail.tmall.com/item.htm?id=616607750344';
			let openUrl = url;
			// 因为 url 一般是从其它地方获取的，所以这里要将 http 和 https 删去
			// 也可以直接输入 https:// 之后的内容，则不需要此步判断，直接调用 plus.runtime.openURL
			if (url.substr(0, 5) === 'https') {
				openUrl = `taobao://${url.substr(8)}`;
			} else if (url.substr(0, 4) === 'http') {
				openUrl = `taobao://${url.substr(7)}`;
			}
			console.log('跳转' + openUrl);
			plus.runtime.openURL(openUrl, function(res) {
				uni.showModal({
					content: '本机未检测到对应客户端，是否打开浏览器访问页面？',
					success: function(res) {
						if (res.confirm) {
							plus.runtime.openURL(url);
						}
					}
				});
			});
		},
		searchgoods(search) {
			this.$u.api
				.gettextdata({
					text: search
				})
				.then(res => {
					// console.log(res);
					if (res.code == 200) {
						console.log(res);
						if (res.data.length > 0) {
							this.goods = res.data[0];
							this.goods.butie = (this.goods.reserve_price * this.reb_rate * (this.goods.commission_rate / 10000)).toFixed(2);
							this.goods.price = parseFloat(this.goods.reserve_price - this.goods.coupon_amount);
							// console.log('原价', this.goods.reserve_price);
							// console.log('分成', this.reb_rate);
							// console.log('佣金比例', this.goods.commission_rate / 100);
							// console.log('面值', this.goods.coupon_amount);
							// this.goodtitle=this.goods.title
							this.isgoodsshow = true;
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		dosearch() {
			console.log(this.search);
			uni.navigateTo({
				url: '/pages/goodsrebate/search/search?search=' + this.search,
				animationType: 'pop-in',
				animationDuration: 300
			});
		},
		doclear() {
			this.search = '';
		},
		gridgo(index) {
			console.log(index);
			switch (index) {
				case 0:
					uni.switchTab({
						url: '/pages/attrinvestment/activity'
					});
					break;
				case 1:
					uni.navigateTo({
						url: '/pages/rungoods/rungoods'
					});
					break;
				case 2:
					uni.navigateTo({
						url: '/pages/queryrate/queryrate',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 3:
					uni.navigateTo({
						url: '/pages/makeimg/makeimg',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 4:
					uni.navigateTo({
						url: '/pages/college/championscollege/championscollege',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 6:
					uni.navigateTo({
						url: '/pages/goodsrebate/index/index',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 7:
					uni.navigateTo({
						url: '/pages/managegoods/managegoods',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
			}
		},
		gobanner(index) {
			console.log(this.bannerlist[index]);
		},
		getbannerlist() {
			this.$u.api.getbannerlist().then(res => {
				this.bannerlist = [];
				for (let i in res.data) {
					let obj = {
						image: res.data[i].url,
						redirect: res.data[i].redirect
					};
					this.bannerlist.push(obj);
				}
			});
		},
		getArrayProps(array, key) {
			var resc = [];
			if (array) {
				array.forEach(function(t) {
					resc.push(t[key]);
				});
			}
			//使用: this.getArrayProps(array, "key");
			return resc;
		},
		gettodayinfo() {
			this.$u.api
				.gettodayinfo()
				.then(res => {
					if (res.code == 200) {
						this.jobinfo = res.data;
						this.jobinfo.diff_price = this.jobinfo.diff_price.toFixed(2);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		getestimateprice() {
			this.$u.api
				.getestimateprice({
					day: 10
				})
				.then(res => {
					// console.log('用户预估服务费', res);
					this.timelist = this.getArrayProps(res.data, 'time'); //正序
					this.timelist2 = this.timelist.slice().reverse(); //倒序
					// this.cmServicelist = this.getArrayProps(res.data, 'cmServiceFee'); //结算服务费
					this.preServicelist = this.getArrayProps(res.data, 'preServiceFee'); //预估服务费 正序
					this.preServicelist2 = this.preServicelist.slice().reverse(); //倒序
					// console.log(this.timelist,this.preServicelist)//正序
					// console.log(this.timelist2,this.preServicelist2)//倒序

					var max = Math.max.apply(null, this.preServicelist);
					// console.log(max)
					this.latelyList = [];
					for (let i in this.timelist2) {
						let obj = {
							time: this.timelist2[i],
							percent: parseInt((this.preServicelist2[i] / max) * 100),
							info: this.preServicelist2[i]
						};
						this.latelyList.push(obj);
					}

					this.getServerData();
				})
				.catch(err => {
					console.log(err);
				});
		},
		getServerData() {
			// uni.request({
			// 	url: 'https://www.ucharts.cn/data.json',
			// 	data: {},
			// 	success: function(res) {
			// 		console.log(res.data.data);
			var _self = this;
			var chartData = {
				categories: this.timelist,
				series: [
					{
						name: '曲面',
						data: this.preServicelist,
						type: 'area',
						style: 'curve'
					},
					{
						name: '曲线',
						data: this.preServicelist,
						type: 'line',
						style: 'curve',
						color: '#1890ff'
					}
				]
			};
			let Mix = {
				categories: [],
				series: []
			};
			//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
			Mix.categories = chartData.categories;
			Mix.series = chartData.series;
			_self.showMix('canvasMix', Mix);
			// 	},
			// 	fail: () => {
			// 		_self.tips = '网络错误，小程序端请检查合法域名';
			// 	}
			// });
		},
		showMix(canvasId, chartData) {
			var _self = this;
			canvaMix = new uCharts({
				$this: _self,
				padding: [0, 0, 0, 0], //画布填充边距
				canvasId: canvasId,
				type: 'mix',
				fontSize: 11,
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				categories: chartData.categories,
				series: chartData.series,
				animation: true,
				enableScroll: false, //开启图表拖拽功能
				dataPointShape: false,
				dataLabel: false,
				legend: {
					show: false
				},
				xAxis: {
					disabled: true,
					disableGrid: true,
					type: 'grid',
					gridType: 'dash',
					itemCount: 4,
					scrollShow: true,
					scrollAlign: 'left'
				},
				yAxis: {
					disabled: true,
					disableGrid: true,
					gridType: 'dash',
					splitNumber: 5,
					min: 10,
					max: 180
					// format: val => {
					// 	return val.toFixed(0)+'12';
					// }
				},
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				extra: {
					tooltip: {
						showBox: false
						// bgColor: 'transparent',
						// bgOpacity: 0.0001,
						// // gridType: 'dash',
						// dashLength: 8,
						// gridColor: 'transparent',
						// fontColor: 'transparent',
						// horizentalLine: true,
						// xAxisLabel: true,
						// yAxisLabel: true,
						// labelBgColor: 'transparent',
						// labelBgOpacity: 0.95,
						// labelAlign: 'left',
						// labelFontColor: 'transparent'
					}
				}
			});
		}
	}
};
</script>
<style></style>
<style lang="scss" scoped>
.container {
	font-size: 32rpx;
	background-color: $lt-bg;

	.container_body {
		padding: 20rpx 28rpx 20rpx 28rpx;
	}
	/* #ifdef MP */
	.usearch::v-deep {
		.u-search {
			width: 528rpx;
		}
	}
	/* #endif */
	.news {
		padding: 10rpx 0;
		font-size: 28rpx;

		.text_notice {
			margin: 0 18rpx;
		}
	}

	.card_body {
		background-color: #ffffff;
		border-radius: 16rpx;

		.lt_class {
			width: 160rpx;
		}

		.lt_item {
			// padding-bottom: 16rpx;
		}
	}

	.user_body {
		padding: 22rpx 40rpx 30rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;

		.username {
			color: rgba(120, 120, 130, 1);
			height: 36rpx;
			font-size: 26rpx;
		}

		.userinfo {
			height: 134rpx;
			display: flex;
			justify-content: space-between;

			.userrmb {
				width: 82rpx;
				height: 42rpx;
				line-height: 42rpx;
				border-radius: 10rpx;
				background-color: rgba(255, 219, 40, 1);
				color: #ffffff;
				font-size: 28rpx;
				font-family: Arial;
				margin: 40rpx 0;
			}

			.usermoney {
			}
		}

		.userrank {
			color: #787882;
			font-size: 24rpx;
			text-align: left;
			padding-top: 4rpx;
		}
	}

	.user_data {
		background-color: #ffffff;
		border-radius: 16rpx;

		// padding: 30rpx 38rpx;
		.mychart {
			width: 600upx;
			height: 160upx;
			border-bottom-width: 2rpx;
			border-bottom-style: solid;
			border-bottom-color: rgba(153, 153, 153, 0.33);
		}

		.charts {
			width: 600upx;
			height: 160upx;
		}

		.latelydate {
			color: #333333;
			font-size: 28rpx;

			.timer {
				display: inline-block;
				width: 160rpx;
			}

			.linepro {
				position: relative;
			}

			.info {
				color: #303133;
				font-size: 28rpx;
				position: absolute;
				top: 0;
				left: 37%;
			}

			/* #ifdef MP */
			.info {
				top: 12rpx;
			}

			/* #endif */
		}
	}
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.popbox {
			font-size: 24rpx;
			position: relative;
			background-color: #fff;
			border-radius: 16rpx;
			.top {
				height: 44rpx;
				padding: 0 16rpx;
				.top_left {
					color: #101010;
				}
			}
			.info {
				padding: 16rpx;
				padding-bottom: 0rpx;
				.infotext {
				}
				.butie {
					float: left;
					// width: 200rpx;
					text-align: center;
					border-radius: 16rpx;
					color: red;
					font-size: 24rpx;
					background-color: #fdbcbc;
					border: 2rpx solid #f77f7f;
					padding: 0 16rpx;
				}
				.dsj {
					width: 100%;
					float: left;
				}
			}
			.goodsbtn {
				width: 310rpx;
				height: 66rpx;
				line-height: 66rpx;
				border-radius: 100rpx;
				background-color: #ff2020;
				text-align: center;
				margin: 44rpx auto 30rpx auto;
				color: white;
			}
			.closebtn {
				position: absolute;
				bottom: -125rpx;
				left: 186rpx;
			}
		}
	}
}
</style>
